/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<       >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<            >>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<     遥控器     >>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<            >>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<       >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

$width: 2px;
$color: #94999c;
$color-hover: #5b5e60;
$color-disabled: #b4b8bb !important;

.VideoPlay-MyControl {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<       >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<            >>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<      顶部      >>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<            >>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<       >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

.VideoPlay-MyControl-top {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;

  /* ============================== 内圆 ============================== */
  > div {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 50%;
    border: 54px solid $color;
    transition: 0.3s;
    cursor: pointer;

    /* —————————————————————————————— 悬浮 —————————————————————————————— */
    &:hover {
      border-color: $color-hover;
    }

    /* —————————————————————————————— 图标 —————————————————————————————— */
    i {
      position: absolute;
      z-index: 10;
      font-size: 32px;
      color: var(--White);
    }

    /* —————————————————————————————— 上 —————————————————————————————— */
    &:nth-child(1) {
      clip-path: polygon($width 0, 50% calc(50% - $width), calc(100% - $width) 0);

      > i {
        top: -42px;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    /* —————————————————————————————— 右 —————————————————————————————— */
    &:nth-child(2) {
      clip-path: polygon(100% $width, calc(50% + $width) 50%, 100% calc(100% - $width));

      > i {
        top: 50%;
        right: -42px;
        transform: translateY(-50%);
      }
    }

    /* —————————————————————————————— 下 —————————————————————————————— */
    &:nth-child(3) {
      clip-path: polygon($width 100%, 50% calc(50% + $width), calc(100% - $width) 100%);

      > i {
        left: 50%;
        bottom: -42px;
        transform: translateX(-50%);
      }
    }

    /* —————————————————————————————— 左 —————————————————————————————— */
    &:nth-child(4) {
      clip-path: polygon(0 $width, calc(50% - $width) 50%, 0 calc(100% - $width));

      > i {
        top: 50%;
        left: -42px;
        transform: translateY(-50%);
      }
    }

    /* —————————————————————————————— 还原 —————————————————————————————— */
    &:nth-child(5) {
      z-index: 10;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-width: 23px;
      transform: translate(-50%, -50%);
    }
  }

  /* ============================== 内圆 ============================== */
  &::after {
    content: "";
    position: absolute;
    top: 57px;
    left: 57px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #a4a7a9;
  }

  /* ============================== 禁用 ============================== */
  &-disabled > div {
    border-color: $color-disabled;
    cursor: not-allowed;
  }
}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<       >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<            >>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<      中部      >>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<            >>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<       >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

.VideoPlay-MyControl-middle {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 4% 0;

  /* ============================== 每行 ============================== */
  > div {
    text-align: center;

    /* —————————————————————————————— 文字 —————————————————————————————— */
    span {
      line-height: 30px;
      margin: 0 32px;
      vertical-align: top;
      font-size: 16px;
      color: var(--Black8);
    }

    /* —————————————————————————————— 图标 —————————————————————————————— */
    i {
      font-size: 30px;
      color: $color;
      transition: 0.3s;
      cursor: pointer;

      &:hover {
        color: $color-hover;
      }
    }
  }

  /* ============================== 禁用 ============================== */
  &-disabled > div {
    /* —————————————————————————————— 文字 —————————————————————————————— */
    span {
      color: #999;
    }

    /* —————————————————————————————— 图标 —————————————————————————————— */
    i {
      color: $color-disabled;
      cursor: not-allowed;
    }
  }
}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<       >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<            >>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<      底部      >>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<            >>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<       >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

.VideoPlay-MyControl-bottom {
  position: relative;
  border: 1px solid #d5d5d5;

  &::before {
    content: "";
    position: absolute;
    top: 30px;
    width: 100%;
    height: 1px;
    background: #d5d5d5;
  }

  > .flexCC {
    line-height: 30px;
    color: var(--Black8);
  }

  > .flex {
    padding: 4px 8px;

    > div {
      position: relative;
    }
  }

  .flex0 {
    width: 28px;
    height: 28px;
    margin: 2px 0 0 8px;
    border-radius: 50%;
    background: var(--Primary);
    transition: 0.3s;

    &::after {
      content: "";
      position: absolute;
      top: 7px;
      left: 10px;
      width: 10px;
      height: 14px;
      clip-path: polygon(0 0, 100% 50%, 100% 50%, 0 100%);
      background: var(--White);
      transition: 0.3s;
    }
  }

  &-loop .flex0 {
    background: var(--Danger);

    &::after {
      top: 9px;
      left: 9px;
      width: 10px;
      height: 10px;
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
  }
}
